<template>
  <van-search
      v-model="searchValue"
      placeholder="账号/手机号"
      input-align="center"
      show-action
      @search="onSearch"
  >
  </van-search>

  <div style="margin-left: 10px">
    <div style="font-size: 15px;margin-left: 10px">
      <span>我的申请</span>
    </div>

    <div v-if="applyInfo != null && applyInfo.myApplyInfoList != null">
      <van-card v-for="user in applyInfo.myApplyInfoList"
                :title="user.username"
                :thumb="user.avatarUrl"
                :tag="user.gender === 0 ? '♂' : ' ♀ '"
      >
        <template #title>
          {{user.username}}
        </template>
        <template #desc>
          <van-text-ellipsis style="width: 150px" rows="1" :content="user.msg" expand-text="展开" collapse-text="收起" />
        </template>
        <template #thumb>
          <van-image :src="user.avatarUrl" style="width: 70px;height: 70px;" fit="cover" round></van-image>
        </template>
        <template #num>
          <van-button style="width: 80px;height: 30px" v-if="user.status==0">待回复</van-button>
          <van-button style="width: 80px;height: 30px" v-if="user.status==2">被拒绝</van-button>
          <van-button style="width: 80px;height: 30px" v-if="user.status==1">已同意</van-button>
        </template>

        <template #tags>
          时间：{{user.createTime}}
        </template>
      </van-card>
    </div>

    <van-empty
        v-else
        image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
        image-size="80"
        description="暂无申请"
    />

  </div>


  <div style="margin-left: 10px">
    <div style="font-size: 15px;margin-left: 10px">
      <span>
        新的朋友
      </span>
    </div>

    <div v-if="applyInfo != null && applyInfo.otherApplyInfoList != null">
      <van-card
          v-for="user in applyInfo.otherApplyInfoList"
          :title="user.username"
          :thumb="user.avatarUrl"
          :tag="user.gender === 0 ? '♂' : ' ♀ '"
      >
        <template #title>
          {{user.username}}
        </template>
        <template #desc>
          <van-text-ellipsis style="width: 150px" rows="1" :content="user.msg" expand-text="展开" collapse-text="收起" />
        </template>
        <template #thumb>
          <van-image :src="user.avatarUrl" style="width: 70px;height: 70px;" fit="cover" round></van-image>
        </template>
        <template #num>
          <div v-if="user.status == 0">
            <van-button style="width: 80px;height: 30px" @click="refuseFriend(user)">拒绝</van-button>
            <van-button style="width: 80px;height: 30px" @click="agreeFriend(user)">待同意</van-button>
          </div>
          <div v-else>
            <van-button style="width: 80px;height: 30px" v-if="user.status == 1">已同意</van-button>
            <van-button style="width: 80px;height: 30px" v-if="user.status == 2">已拒绝</van-button>
          </div>
        </template>
        <template #tags>
          时间：{{user.createTime}}
        </template>
      </van-card>
    </div>

    <van-empty
        v-else
        image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
        image-size="80"
        description="暂无申请"
    />

  </div>

<!--  <van-button @click="send">发送</van-button>-->
<!--  <van-button @click="initCon">建立连接</van-button>-->


</template>


<script setup lang="ts">
import {connectionSendAddApply, connectionSendAddApplyRes, onIsConnect} from "../ws/socketWork.ts";
import {onMounted, ref} from "vue";
import {userStore} from "../stores/user/user.ts";
import {selectApplyInfo} from "../api/userApply.ts";
import {selectUserById} from "../api/userApi.ts";

const userStoreAPI = userStore();
const searchValue = ref('');
const currentUser = ref();

const applyInfo = ref();//查询申请的信息 (别人申请加我 + 我加的别人)


const onSearch = ()=>{
  console.log('onSearch',searchValue.value);
};



const onClickButton = ()=>{
  console.log('onClickButton',searchValue.value);
}

//同意好友申请
const agreeFriend = (user:any)=>{
  //发送同意好友申请
  connectionSendAddApplyRes(currentUser.value.id,'同意',user.uid,currentUser.value.username,user.username);
  user.status = 1;
};

//拒绝好友申请
const refuseFriend = (user:any)=>{
  //发送拒绝好友申请
  connectionSendAddApplyRes(currentUser.value.id,'拒绝',user.uid,'','');
  user.status = 2;
}




//加载触发
onMounted(async ()=>{
  currentUser.value = await userStoreAPI.getCurrentUser();
  //判断是否断开连接
  onIsConnect(currentUser.value.id);

  const res = await selectApplyInfo();
  if (200 == res.code){
    applyInfo.value = res.data;
  }
  console.log("申请列表信息",applyInfo.value)

});


//监听好友申请事件(当使用该页面时)，没有使用直接加载时onMounted查询数据库即可  /
// 监听连接成功事件（自定义） =》 先监听后触发事件(连接成功触发) =>监听获取别人申请的信息
// window.addEventListener('haveApply', async function(event) {
//   console.log('haveApply');
//   console.log('haveApplyMsgObject',event.detail);//直接传递了一个对象回来
//   //查询用户信息
//   const res = await selectUserById(event.detail.uid);
//   if (200 == res.code){
//     //构建申请消息
//     const applyData = {
//       uid:event.detail.uid,
//       msg:event.detail.content,
//       targetId:event.detail.toUid,
//       avatarUrl:res.data.avatarUrl,
//       gender:res.data.gender,
//       status: 0,
//       createTime:res.data.createTime
//     }
//     if (applyInfo.value.otherApplyInfoList == null){
//       applyInfo.value.otherApplyInfoList = [];
//     }
//     applyInfo.value.otherApplyInfoList.push(applyData);
//
//   }
// });

// //监听申请回复(不监听变化了，ref好像监听不到里面的元素变化)
// window.addEventListener('haveApplyRes',function(event) {
//   console.log('haveApplyResMsgObject',event.detail);//直接传递了一个对象回来
//   //查询用户信息
//   const id = event.detail?.fromUid;
//   const index = applyInfo.value.myApplyInfoList.findIndex(item => item.id === id);
//   if (index!== -1) {
//     if ('同意' == event.detail.content){
//       // 创建一个新的对象并更新状态，触发响应式更新
//       applyInfo.value.myApplyInfoList[index] = {...applyInfo.value.myApplyInfoList[index], status: 1 };
//     }else if('拒绝' == event.detail.content){
//       // 创建一个新的对象并更新状态，触发响应式更新
//       applyInfo.value.myApplyInfoList[index] = {...applyInfo.value.myApplyInfoList[index], status: 2 };
//     }
//   }
// });



</script>

<style scoped>

</style>